<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        a{
            padding:50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    /**
     *  react中的事件：
     * 1. 事件名：on + 事件名 首字母大写。 例如： onClick、onChange、onMousemove, 
     * 2. 语法：onClick={函数名[函数的定义|函数的引用地址]}
     * 3. 事件的回调函数：
     *       1. 事件对象e:是一个经过react重新包装处理的事件对象，这个事件对象比原生的事件对象好用。已经做过兼容性处理了。           如果想获取原生的事件对象，从nativeEvent中获取
     *          
     *       2. this指向：值是undefined， 
     *          说明 （1）this指向window 
     *               （2）react默认开启的是严格模式【严格模式下this指向window的都是undefined】
     *               （3）说明react中的事件回调函数是window调用的，而不是当前按钮，也不是当前组件调用的
     * 
     *       3. 事件回调函数的传参问题
     *       4. 阻止事件默认行为  e.preventDefault()
     *          
     *      
     */
    function ck1(e){
        console.log('ck1 触发了')
        console.log('e: ', e)
        console.log('this: ', this) //undefined
    }

    function ck2(a,b,c){
        console.log('a',a)
        console.log('b',b)
        console.log('c',c)
    }

    function aClick(e){
        console.log('a标签被点击了')
        // 阻止默认行为
        e.preventDefault()
        // return false; // react 中不好使
    }

    function stop(e){
        e.stopPropagation();
        // console.log(e)
        console.log('阻止冒泡到京东')
    }

    const root = ReactDOM.createRoot(document.querySelector('#root'))
    root.render((
        <div>
            <p>按钮： <button onClick={ck1}>click</button></p>
            <hr/>
            <h3>事件传参</h3>
            <p>传参： <button onClick={function(){ck2(1,2,3)}}>传参</button></p>
            <p>传参： <button onClick={()=>{ck2(1,2,3)}}>传参</button></p>
            <p>传参： <button onClick={()=>ck2(1,2,3)}>传参</button></p>
            <hr/>
            <p>即传参又传事件对象： <button onClick={()=>ck2(1,event,3)}>传参</button></p>
            <hr/>
            <h4>阻止默认行为</h4>
            <a href="http://baidu.com" onClick={aClick}>百度</a>

            <a href="http://jd.com" >
                <button onClick={stop}>不想去京东上班，给5万太少了</button>
            </a>

            <h4>阻止冒泡</h4>'
            <div onClick={ck1}>
                <button onClick={stop}>阻止冒泡</button>
            </div>

            <h4>onChange事件</h4>
            <input type="text" name="" id="" onChange={(e)=>{
                // react中的onChange事件的调用时机，只要输入就触发。
                // react中的onChange事件其实是 原生dom中的 oninput事件
                // e
                console.log('e',e)
                console.log(e.target.value)
            }}/>
        </div>
    ))
</script>
</html>
